<template>
  <div class="carditem" v-if="selection">
    <div class="content">
      <div class="author">
        <div @click="toUserinfo(selection.resource.author.userinfo.id)">
          <div class="avatar">
            <img :src="selection.resource.author.userinfo.avatar" alt="" />
          </div>
          <p class="authorname">
            {{ selection.resource.author.userinfo.username }}
          </p>
        </div>
        <div class="follow">
          <span
            @click="addFollow(selection.resource.author.userinfo.id)"
            v-if="arr.indexOf(selection.resource.author.userinfo.id) === -1"
            >+ 关注</span
          >
          <span
            @click="removeFollow(selection.resource.author.userinfo.id)"
            v-else
            >已关注</span
          >
        </div>
      </div>
      <div class="text">
        <p>{{ selection.resource.title }}</p>
      </div>
      <div class="video" @click="toDetail(selection.resource.id)">
        <!-- <img :src="selection.resource.cover" alt="" /> -->
       <van-image :src="selection.resource.cover" height="200rem" width="100%">
  <template v-slot:loading>
    <van-loading type="spinner" size="20" />
  </template>
</van-image>
      </div>
      <div class="title" >
        <div>
          <van-icon name="eye-o" color="#000" size="20" />
          <p>{{NumberFilter(selection.resource.count.count_view)  }}</p>
        </div>
        <div>
          <van-icon name="comment-o" color="#000" size="20" />
          <p>{{NumberFilter(selection.resource.count.count_comment)  }}</p>
        </div>
        <div>
          <van-icon name="good-job-o" color="#000" size="20" />
          <p>{{ NumberFilter( likeList.indexOf(selection.resource.id) != -1? selection.resource.count.count_like + 1 : selection.resource.count.count_like) }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { computed } from "@vue/runtime-core";
import { useHotStore } from "../stores/index.js";
import { useRouter } from "vue-router";

const router = useRouter();
const hotStore = useHotStore();
const props = defineProps(["selection"]);
// console.log(props.selection);
// console.log(hotStore);
const arr = ref(JSON.parse(localStorage.getItem("arr")) || []);
const followList = ref(JSON.parse(localStorage.getItem("followList")) || []);
const likeList = ref(JSON.parse(localStorage.getItem("likeList")) || []);

function toDetail(id) {
  router.push({
    path: "/detail",
    query: {
      id,
    },
  });
}

function toUserinfo(id) {
  router.push({
    path:'/userinfo',
    query:{
      id,
    }
  });
}

// console.log(JSON.parse(localStorage.getItem("arr")));
//添加关注
function addFollow(id) {
  // console.log(id);
  let a = JSON.parse(localStorage.getItem("arr")) || [];
  arr.value = [id, ...a];
  localStorage.setItem("arr", JSON.stringify(arr.value));

  if (localStorage.getItem("userinfo")) {
    
    let followList = ref(JSON.parse(localStorage.getItem("followList")) || []);
    
    followList.value = [...followList.value, props.selection.resource.author];
   

    localStorage.setItem("followList", JSON.stringify(followList.value));
  } else {
    router.push("/login");
  }
}

//取消关注
function removeFollow(id) {
  // followList.value.splice(
  //   followList.value.findIndex(
  //     (item) => item.resource.id == props.selection.resource.id
  //   )
  // );
  let a = JSON.parse(localStorage.getItem("arr")) || [];
  arr.value = a.filter((o) => o != id);
  localStorage.setItem("arr", JSON.stringify(arr.value));
  let followList = ref(JSON.parse(localStorage.getItem("followList")) || []);
  followList.value = followList.value.filter((o) => o.userinfo.id != id);
  localStorage.setItem("followList", JSON.stringify(followList.value));
}



const NumberFilter = computed(() => {
  return (value) => {
    // console.log(value);
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});
</script>

<style lang="scss" scoped>
.carditem {
  .content {
    // height: 300rem;
    background-color: #fff;
    border-radius: 10rem;
    overflow: hidden;
    .video {
      width: 100%;
      height: 200rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text {
      p {
        font-size: 14rem;
        font-weight: bold;
        padding: 0rem 12rem 12rem;
      }
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15rem 12rem 0rem;
      padding-bottom: 12rem;
      border-bottom: 2rem solid #f5f5f5;
      div {
        display: flex;
        align-items: center;
      }
      p {
        font-size: 16rem;
        color: #000;
        height: 20rem;
        line-height: 23rem;
        margin-left: 3rem;
      }
      .like {
        display: flex;
        align-items: center;
        .num {
          font-size: 12rem;
          color: #666;
          height: 20rem;
          line-height: 25rem;
          margin-left: 3rem;
        }
      }
    }
    .author {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12rem 30rem 12rem 12rem;
      div {
        display: flex;
        align-items: center;
        .avatar {
          img {
            width: 25rem;
            height: 25rem;
            border-radius: 50%;
          }
        }
      }
      p {
        font-size: 14rem;
        color: #000;
        margin-left: 10rem;
      }
      .follow {
        color: red;
        font-weight: bold;
      }
    }
  }
}
</style>